<template>
	<div>
		<div class='search'>
			<input type="text" name="search" ref='search' placeholder="请输入产品名称" v-model='search_input.keyWord' :style='{width:search_focus_status ? "90%" : "100%"}' @focus='search_focus(focus)' />
			<span v-if='search_focus_status' class='ft12' @click='search_blur(cancel_search)'>取消</span>
			<a-spin  :spinning="spinning"  :indicator="indicator"  class='search_bg' :class='{leave:search_bg_leave, movable:search_focus_status}'  > <!-- v-if='search_focus_status' -->
				<div >
					<div  v-if='search_input_hasData=="nodata"' class='search_request_status '>暂无数据，请输入关键字搜索</div>
					<div  v-if='search_input_hasData=="yes"' class='clear ml20 mr20  lh-200'><span class='ft14 '>已为您检索到以下数据：</span><a-button  class=' fr'  @click='clearSearch()'>清空搜索</a-button></div>
					<dd   v-if='search_input_hasData=="yes"'    class='contain-main'   v-for='(item,index) in search_result_data'>
						<router-link :to='{path:"/productDetail",query:{code:item.code}}'>
							<div class='_title'>{{item.name}}</div>
							<ul class='table_div'>
								<li> <span class='color-yellow'>{{item.size | Num_splitby_thresscomma}}</span> <br> <span class='ft12 color-999'>规模（万）</span> </li>
								<li> <span class='color-yellow'>{{item.startingAmt | Num_splitby_thresscomma}}</span>          <br> <span class='ft12 color-999'>起投金额（万）</span> </li>
								<li> <span class='ft12'>{{item.type | productType}}</span>    								 <br> <span class='ft12 color-999'>产品类型 </span> </li>
								
								<li> <span class='ft12'>{{item.subsistingCycle}}个月</span>                                   		 <br> <span class='ft12 color-999'>存续周期</span> </li>
							</ul>
						</router-link>
					</dd>
				</div>
			</a-spin>
		</div>
		<a-carousel  :dotsClass='test' autoplay >
		    <img src='static/img/banner.png' >
		    <img src='static/img/banner2.png' >
		    <img src='static/img/banner3.png' > 
		</a-carousel>
		<ul class='homeNav'>
			<li style="text-align: left" class='one'><router-link to='/product#1'>在售产品</router-link></li>
			<li class='two'><router-link to='/product#2'>推荐资产</router-link></li>
			<li class='three'><router-link to='/release'>发布合作</router-link></li>
			<li  class='four'style="text-align: right;"><router-link to='/userCenter'>关于我们</router-link></li>
		</ul>
		<dl class='contain mt15'> 
			<dt class="contain-title border-b-1"><span>重点推荐</span></dt>
			<dd class='contain-main' v-for='(item,index) in recommendData'>
				<router-link :to='{path:"/productDetail",query:{code:item.code}}'>
					<div class='_title'>{{item.name}}</div>
					<ul class='table_div'>
						<li> <span class='color-yellow'>{{item.size | Num_splitby_thresscomma}}</span> <br> <span class='ft12 color-999'>规模（万）</span> </li>
						<li> <span class='color-yellow'>{{item.startingAmt | Num_splitby_thresscomma}}</span>          <br> <span class='ft12 color-999'>起投金额（万）</span> </li>
						<li> <span class='ft12'>{{item.type | productType}}</span>    								 <br> <span class='ft12 color-999'>产品类型 </span> </li>
						<li> <span class='ft12'>{{item.financingSubjectNature |financingSubjectNature}}</span>                                   		 <br> <span class='ft12 color-999'>融资主体性质</span> </li> 
					</ul>
				</router-link>
			</dd> 
		</dl>
		<div class='data_tip'>暂无更多数据</div>
	</div>
</template>

<script >
	import { productList }  from  '@/api/home/index'
	export default{
		name:'login_index',
		data(){
			return {
				indicator: <a-icon type="loading" style="font-size: 24px" spin />,
				test:'dotClass',
				spinning:false,
				mobileType:'',//input_blur_event of ios or android

				recommendData:[],  
				search_recommend:{
					isRecommend:'1'
				},

				search_focus_status:false, 
				search_result_data:[],
				search_input:{
					keyWord:''
				},
				search_input_hasData:'nodata',//request yes
				search_bg_leave:false,
			}
		},
		created(){
			this.pageInit()
			//if need searchPage
			let search_status = this.$store.state.footerShow
			if(search_status == false){
				this.search_focus_status = true
				this.search_input.keyWord = this.$store.state.temporary_input
				this.searchInit()
			} 
			
			this.mobileType = this.mobile_type() 
			//add event
			window.addEventListener('keypress',this.keypress) 
			window.addEventListener('unload',(e)=>{
				alert('beforeunload')
				return false
			})  
		},
		methods:{
			pageInit(){  
				this.spinning = true 
				let list = new Promise((resolve,reject)=>{
		  	 		productList(this.search_recommend).then((res)=>{
		  	 			if(res.data.flag == true){
		  	 				resolve(res.data)
		  	 			}
		  	 			else{
		  	 				reject()
		  	 			}
		  	 		})
		  	 	})
  
				Promise.all([list]).then((res)=>{  
					this.recommendData = res[0].dataList
					// this.data = this.data.concat(res[1].dataList) 
					// this.hasNext = res[1].hasNext
					// this.totalNum = res[1].totalRs
					this.spinning = false
				}).catch((err)=>{
					console.log(err)
					this.spinning = false
				}) 
			},
			searchInit(){  
				this.spinning = true 
				let list = new Promise((resolve,reject)=>{
		  	 		productList(this.search_input).then((res)=>{
		  	 			if(res.data.flag == true){
		  	 				resolve(res.data)
		  	 			}
		  	 			else{
		  	 				reject()
		  	 			}
		  	 		})
		  	 	})
  
				Promise.all([list]).then((res)=>{   
					this.search_result_data = res[0].dataList
					this.search_input_hasData = res[0].totalRs>0? 'yes':'nodata'

					this.spinning = false
				}).catch((err)=>{
					console.log(err)
					this.spinning = false
				}) 
			},

			keypress(e){
				// console.log(e)
				if(e.keyCode == 13){
					e.preventDefault();
					this.searchInit()
				}
			},

			focus(){
				//cancel-button show 
				this.search_focus_status = true  
			}, 
			cancel_search(){
				this.search_input.keyWord = ''
				this.search_focus_status = false

				this.search_result_data = []
				this.search_input_hasData = 'nodata'

				this.search_bg_leave = true
			},
			clearSearch(){
				this.search_input.keyWord=""
				this.$refs.search.focus()
			},
			popstate(){
				this.$refs.search.blur()
				this.cancel_search()
			},
 
		} ,
		//监听data里某个值变化
		watch:{
			search_focus_status(newVal,old){ // console.log(newVal,old)
				if(old == false){
					// 阻止安卓实体键后退 页面载入时使用pushState插入一条历史记录 
					window.history.pushState(null, null, '#/home' );
					window.addEventListener('popstate', this.popstate );
				}
				else{
					window.removeEventListener('popstate', this.popstate );
				} 
			}
		},
		 
		destroyed(){ 
			//跳转到新页面时 存储input值 
			this.$store.commit("settemporary_input",this.search_input.keyWord)
			window.removeEventListener('keypress',this.keypress )
			window.removeEventListener('popstate', this.popstate );
		}
	}
</script>

<style scoped="scoped">
.search{padding: 0.06rem 0.15rem;background: #fff;position: fixed;z-index: 9;width: 100%;}
.search input {width: 100%;border-radius: 0.12rem;background:url(../../assets/img/search.png) no-repeat 0.2rem center #F8F5F5;height: 0.25rem;padding: 0.05rem 0.2rem 0.05rem 0.46rem;font-size: 0.12rem}	
.search_bg{position: fixed;left:-100%;width:100%;/*right: 0;*/top:36px;bottom: 0; z-index: 9; background-color: #fff;border-top: 1px solid #d9d9d9;padding: 0.1rem 0 0.5rem;overflow: auto;}/*bottom 以body为参照*/
.search_bg.leave{animation: endAni 0.3s ;animation-timing-function: linear;animation-fill-mode:forwards;-webkit-animation: endAni 0.3s ;-webkit-animation-timing-function: linear;-webkit-animation-fill-mode:forwards; /* Safari 和 chrome */}
@keyframes endAni{ 0% {left:0;} 100% {left:-100%;} }
.search_bg.movable{animation: moveAni 0.3s;animation-timing-function: linear;animation-fill-mode:forwards;-webkit-animation: moveAni 0.3s ;-webkit-animation-timing-function: linear;-webkit-animation-fill-mode:forwards; }
@keyframes moveAni{ 0% {left:-100%;} 100% {left:0;} }
.search_request_status{text-align: center;padding-top: 1rem;font-size: 0.14rem;}

/*幻灯片*/
.ant-carousel{padding-top: 0.37rem;}
.ant-carousel >>> .slick-slide {height: 1.25rem;overflow: hidden;}

.homeNav{background:#fff;padding: 0.15rem ;display: table;width: 100%;margin-top: 0.15rem}
.homeNav li {display: table-cell;width: 25%;text-align: center;}
.homeNav li a{display:inline-block;width: 100%;padding-top: 0.5rem; }
.homeNav li.one {background:url(../../assets/img/homeNav_1.png) no-repeat 0.15rem 0/0.4rem 0.4rem;}
.homeNav li.two {background:url(../../assets/img/homeNav_2.png) no-repeat top center/0.4rem 0.4rem;}
.homeNav li.three {background:url(../../assets/img/homeNav_3.png) no-repeat top center/0.4rem 0.4rem;}
.homeNav li.four {background:url(../../assets/img/homeNav_4.png) no-repeat 0.3rem 0/0.4rem 0.4rem;}
 



</style>